<template lang="html">
  <div class="test">
    <figure>
      <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试文章文章</p>
      <img src="http://120.25.144.98:8086/images/1.jpg" width="300px">
    </figure>
  </div>
</template>

<script>
import vDom from '@/assets/script/element/element'
export default {
  methods: {
    init() {
      let el = vDom.el
      let diff = vDom.diff
      let patch = vDom.patch

      let tree = el('div', {
        'id': 'container'
      }, [
        el('h1', {
          style: 'color: blue'
        }, ['simple virtal dom']),
        el('p', ['Hello, virtual-dom']),
        el('ul', [el('li')])
      ])

      var root = tree.render()

      var newTree = el('div', {
        'id': 'container'
      }, [
        el('h1', {
          style: 'color: red'
        }, ['simple virtal dom']),
        el('p', ['Hello, virtual-dom']),
        el('ul', [el('li'), el('li')])
      ])

      var patches = diff(tree, newTree)

      var result = patch(root, patches)
      console.log(patches, result)
    }
  },
  mounted() {
    // this.init();
  }
}
</script>

<style lang="scss">
</style>
